<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>北城韩雨 - 一个前端界的小学生</title><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="一个前端界的小学生">
<meta property="og:type" content="website">
<meta property="og:title" content="北城韩雨">
<meta property="og:url" content="http://example.com/page/3/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="一个前端界的小学生">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/img/my.jpg">
<meta property="article:author" content="北城韩雨">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://example.com/img/my.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/page/3/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '北城韩雨',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2021-08-02 17:15:24'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/img/bg2.jpeg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">北城韩雨</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-bell scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="bbTimeList container" id="bbTimeList" onclick="window.open('/shuoshuo/','_self')"><bblogo onclick="location='/shuoshuo/'" title="即刻短文" style="font-size: 2rem;"></bblogo><div class="swiper-container" id="bbtalk"><div class="swiper-wrapper" id="bber-talk"></div></div><i class="bber-gotobb fas fa-arrow-circle-right" onclick="location='/shuoshuo/'" title="查看全文"></i></div><div class="js-pjax"><script>var bbShortApiUrl = "https://7477-twikoo-4gkyxol6e825079a-1306570258.tcb.qcloud.la/json/bber.json?sign=cfe19172dcf9e18f67123e3da26cb579&t=1627461876"</script><script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js" data-pjax=""></script><script src="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.js" data-pjax="" defer=""></script></div><div class="recent-post-item" style="height:auto;width:100%;padding:0px;"><div id="categoryBar"><ul class="categoryBar-list"><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Gin-Vue-Admin/">Gin-Vue-Admin</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/JS%E9%AB%98%E7%BA%A7/">JS高级</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/JavaScript/">JavaScript</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Node/">Node</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/React/">React</a><span class="categoryBar-list-count">3</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/TS/">TS</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/Vue/">Vue</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/webpack/">webpack</a><span class="categoryBar-list-count">3</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">前端性能优化</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%8E%9F%E7%94%9FJs/">原生Js</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%8E%9F%E7%94%9Fjs/">原生js</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E5%BE%AE%E4%BF%A1/">微信</a><span class="categoryBar-list-count">2</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/">性能优化</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%95%B0%E6%8D%AE%E5%BA%93/">数据库</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/">服务端渲染</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E6%BA%90%E7%A0%81/">源码</a><span class="categoryBar-list-count">15</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E7%AE%97%E6%B3%95/">算法</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E7%BB%84%E4%BB%B6%E5%B0%81%E8%A3%85/">组件封装</a><span class="categoryBar-list-count">4</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E8%99%9A%E6%8B%9FDom/">虚拟Dom</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a><span class="categoryBar-list-count">1</span></li><li class="categoryBar-list-item"><a class="categoryBar-list-link" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a><span class="categoryBar-list-count">9</span></li></ul></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/18/%E7%AE%97%E6%B3%95/" title="常用算法及思路">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2016-12-29%2F0604092c7129acd0f4029c6728db7fd7%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530724&amp;t=333c5056a813a542419e5b661ebcfcd9" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="常用算法及思路"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/18/%E7%AE%97%E6%B3%95/" title="常用算法及思路">常用算法及思路</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-17T16:00:00.000Z" title="发表于 2020-04-18 00:00:00">2020-04-18</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E7%AE%97%E6%B3%95/">算法</a></span></div><div class="content">算法扁平数据结构转树形数据结构1234567891011allRes: [       &#123; id: 2, resName: &#x27;设置权限&#x27;, pid: 1 &#125;,       &#123; id: 3, resName: &#x27;编辑角色&#x27;, pid: 1 &#125;,       &#123; id: 4, resName: &#x27;删除角色&#x27;, pid: 2 &#125;,       &#123; id: 5, resName: &#x27;添加用户&#x27;, pid: 4 &#125;,       &#123; id: 6, resName: &#x27;更新用户&#x27;, pid: 4 &#125;,       &#123; id: 7, resName: &#x27;删除用户&#x27;, pid: 6 &#125;,       &#123; id: 8, resName: &#x27;重置密码&#x27;, pid: 3 &#125;,       &#123; id: 9, resName: ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/18/%E8%99%9A%E6%8B%9FDom/" title="虚拟Dom">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2016-12-29%2F0604092c7129acd0f4029c6728db7fd7%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530724&amp;t=333c5056a813a542419e5b661ebcfcd9" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="虚拟Dom"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/18/%E8%99%9A%E6%8B%9FDom/" title="虚拟Dom">虚拟Dom</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-17T16:00:00.000Z" title="发表于 2020-04-18 00:00:00">2020-04-18</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E8%99%9A%E6%8B%9FDom/">虚拟Dom</a></span></div><div class="content">虚拟DOM  Vdom虚拟DOM(VDom)是什么121.简单来说就是用js对象的形式来描述真实的DOM2.因为真实的DOM对象有很多的属性 所以我们每次操作真实的DOM的时候 都会伴随着这些属性的 性能会十分的低效
12345678910//我们现在把真实的DOM属性都打印看了一下&lt;script&gt;    const div = document.createElement(&#x27;div&#x27;)    let res = &#x27;&#x27;    for (var key in div)&#123;        res +=  key + &#x27; &#x27;    &#125;    console.log(res)&lt;/script&gt;//这里我们只是新建了一个div 还没有建立子元素 就看到如此多的属性 只要我们稍微操作一下DOM 浏览器的性能就会下降

1234567891011121314151617&lt;!--下面是一个我们真实的DOM元素--&gt;    &lt;div id=&quot;app&quot;&gt;     ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/14/render%E5%87%BD%E6%95%B0%20%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6%20JSX/" title="Vue中的函数式组件">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-12-05%2F66b696ea615f3567a32b65f93611a814%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530687&amp;t=c2e3c97de6dbdc29e77593d5f4dc7fb5" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue中的函数式组件"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/14/render%E5%87%BD%E6%95%B0%20%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6%20JSX/" title="Vue中的函数式组件">Vue中的函数式组件</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-13T16:00:00.000Z" title="发表于 2020-04-14 00:00:00">2020-04-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/Vue/">Vue</a></span></div><div class="content">函数式组件1231.我们在写vue模板的时候 有些不是很灵活 所以就有了函数式组件2.主要还式在写jsx 然后用render函数渲染到页面上3.jsx 可以把他看成js 和html的集合 里面的变量可以写在标签上
解析11.我们现在比如像实现一个标题组件 你给我传过来类型 我显示对应的H1、H2、H3之类的标签
12345678910111213141516171819202122//调用标题组件的页面&lt;template&gt;  &lt;el-card class=&quot;box-card&quot;&gt;      &lt;div style=&quot;margin-bottom:30px;&quot;&gt;render函数 函数式组件 JSX&lt;/div&gt;      &lt;div&gt;        //你给我传进去的值 我就去判断          &lt;level :numbner=&quot;1&quot;&gt;标题&lt;/level&gt;        &lt;level :numbner=&quot;2&quot;&gt;标题&lt ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/14/%E6%9D%83%E9%99%90%E9%80%BB%E8%BE%91/" title="权限逻辑">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2016-12-29%2F0604092c7129acd0f4029c6728db7fd7%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530724&amp;t=333c5056a813a542419e5b661ebcfcd9" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="权限逻辑"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/14/%E6%9D%83%E9%99%90%E9%80%BB%E8%BE%91/" title="权限逻辑">权限逻辑</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-13T16:00:00.000Z" title="发表于 2020-04-14 00:00:00">2020-04-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">权限逻辑一登录123451.首先我们在登录的时候 登录页面触发了vuex中的actions 也就是说登录的请求是在vuex中完成的2.vuex中的Actions 发起了登录请求 带着你的账户和密码 去向后端请求了 后端这个时候返回给你的是token 3.后端返回token之后我们需要存放在vuex中一分 在存在本地存储 或者使用js-cookies 存放在cookies里一份token4.vuex中存放的token 我们必须要去本地存储或者cookies中取一份4.以上步骤完成之后 在登录页面中完成跳转
1234567891011121314151617181920//登录页面handleLogin() &#123;      this.$refs.loginForm.validate(valid =&gt; &#123;        if (valid) &#123;          this.loading = true          this.$store.dispatch(&#x27;user/login&#x27;, this.loginForm)           ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/14/%E5%89%8D%E7%AB%AF/" title="SSR 渲染 之前端">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-12-05%2F66b696ea615f3567a32b65f93611a814%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530687&amp;t=c2e3c97de6dbdc29e77593d5f4dc7fb5" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SSR 渲染 之前端"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/14/%E5%89%8D%E7%AB%AF/" title="SSR 渲染 之前端">SSR 渲染 之前端</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-13T16:00:00.000Z" title="发表于 2020-04-14 00:00:00">2020-04-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">1.初始化1231.这里我们使用nuxt创建了前端项目2.命令npx create-nuxt-app &lt;项目名&gt;
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657✨  Generating Nuxt.js project in felltest? Project name (felltest) //名字? Project description (My doozie Nuxt.js project) //不知道? Author name (北城韩语) //作者名字//使用什么包管理? Choose the package manager (Use arrow keys)&gt; Yarn  Npm//使用的UI组件库? Choose UI framework (Use arrow keys)    None  Ant Design Vue   Bootstrap Vue  Buefy  Bulma&gt; Elem ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/14/%E5%90%8E%E7%AB%AF/" title="SSR 渲染 之后端">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SSR 渲染 之后端"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/14/%E5%90%8E%E7%AB%AF/" title="SSR 渲染 之后端">SSR 渲染 之后端</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-13T16:00:00.000Z" title="发表于 2020-04-14 00:00:00">2020-04-14</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">1.初始化12341.这里我们使用egg创建了后端项目2.创建命令npm init egg --type=simple 初始化项目npm i 安装egg
2.项目结构目录12345671.app文件夹controller 文件夹 里面存放业务层文件middlware  文件夹 里面存放中间件文件 比如我们在访问某个路由的时候需要token model 文件夹 里面存放数据模型文件 比如数据表之类的字段都可以在这里定义pulic 文件夹 里面存放静态资源service 文件夹 里面存放我们可以在全局使用的方法 暂时这么理解router.js 文件 里面是我们路由
123456789101112131415161718192021router.js 文件代码 比如如下 &#x27;use strict&#x27;;module.exports = app =&gt; &#123;  //这里是把app结构出来了 我们可以拿到router 和你的 controller里面的文件 你也可以通过app点的形式 拿到那些你的结构目录下面的文件  const &#123; router, contr ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/04/13/ssr%20nuxt/" title="SSR 之 服务端渲染">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-12-05%2F66b696ea615f3567a32b65f93611a814%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530687&amp;t=c2e3c97de6dbdc29e77593d5f4dc7fb5" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="SSR 之 服务端渲染"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/13/ssr%20nuxt/" title="SSR 之 服务端渲染">SSR 之 服务端渲染</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-04-12T16:00:00.000Z" title="发表于 2020-04-13 00:00:00">2020-04-13</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/">服务端渲染</a></span></div><div class="content">nuxt安装11.npx create-nuxt-app &lt;项目名称&gt; //相当于先全局安装 npm i nuxt 然后在创建一个项目 两个命令执行在一起了
路由的生成1231.首先我们需要在你的page下的文件目录里去创建你的页面2.然后我们在浏览器的地址栏里输入你的文件名称 就会跳转到你对应创建的文件的页面3.当你在page文件夹里创建文件的时候 在.nuxt文件里的router.js文件就会给你自动添加进去你的路由跳转路径
123456789101112// pages/detail.vue pages文件夹 新建了一个页面 这个时候路由就会自动帮我们添加进去 &lt;template&gt;  &lt;div&gt;    detail  &lt;/div&gt;&lt;/template&gt;&lt;script&gt;export default &#123;&#125;&lt;/script&gt;

1以上我们新建了一个页面 detail文件  这个时候路由就会自动帮我们生成路由 这里是一级路由 我们可以通过 访问浏览器地址的detail路径访问到


视 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/04/01/%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A/" title="事件绑定">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="事件绑定"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/04/01/%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A/" title="事件绑定">事件绑定</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-03-31T16:00:00.000Z" title="发表于 2020-04-01 00:00:00">2020-04-01</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="content">DOM事件基础知识121. 事件是浏览器赋予元素的默认行为 也可以理解为事件 是天生具备的 不论我们是否为其绑定方法 当某些行为触发的时候 相关的事件都会被执行2. 事件绑定 给元素默认的事件行为 绑定方法 可以在行为触发的时候 执行这个方法
常用事件12345678910111213141516171819202122232425262728293031323334353637383940411. 鼠标事件 click 点击事件(pc) 单击事件(移动端 300ms 内没有发生第二次点击操作 算作单机事件行为 所以click在移动端 有300ms 延迟)dblclick 双击事件contextmenu 鼠标右键点击触发mousedown 鼠标按下 mouseup 鼠标抬起   mousemove 鼠标移动mouseover 鼠标滑入mouseout 鼠标滑出mouseenter 鼠标进入mouseleave 鼠标离开mousewheel 鼠标滚轮2. 键盘事件keydown 键盘按下keyup 键盘抬起keypress 长按 除了shift fn capslock3. 手指事件「to ...</div></div></div><div class="recent-post-item"><div class="post_cover left_radius"><a href="/2020/03/29/Dialog/" title="弹框组件">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="弹框组件"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/03/29/Dialog/" title="弹框组件">弹框组件</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-03-28T16:00:00.000Z" title="发表于 2020-03-29 00:00:00">2020-03-29</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">弹框组件封装思想121. 这里我们封装的是一个插件组件 也就是 这里面有样式 和 html 结构2. 不同于我们的方法 直接调用即可 这里可能还支持我们的自定义样式
需要考虑的事情123456781. 实现一个插件组件(UI) 这就可能存在处理样式的问题2. 在插件内部 创建元素的时候 把样式 基于行内的样式 写入进去 所有的HTML结构 都要基于 JS 创建 这种方式 调用很方便  但是不能提取公共样式的提取 以及 后期的修改 如果用户自定义样式的处理 是不能实现的3. 第二种方案。就是 把我们的方案写如到样式表中 如果不期望用户自己导入样式 我们在JS中动态创建LIKN标签 不过这种方式 必须要联网 并且导入的样式资源最好部署到CDN上(否则导入速度慢)4. 样式中 尽量不要出现图片 因为会导致别人在用你的插件的时候 出现样式错乱 如果一定要用 那么尽量用base645. JS的处理 这里我们基本上都是用基于变向对象思想 去封装 这种好处 插件可以创建实例 调用一次 就相当于创建一个实例 实例和实例之间 既存在私有的属性方法 也能调用共公共的方法 并且还可以把类当作对象 6. 需要 ...</div></div></div><div class="recent-post-item"><div class="post_cover right_radius"><a href="/2020/03/28/%E6%8B%96%E6%8B%BD/" title="拖拽">     <img class="post_bg" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2016-12-29%2F0604092c7129acd0f4029c6728db7fd7%2F00001.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530724&amp;t=333c5056a813a542419e5b661ebcfcd9" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="拖拽"></a></div><div class="recent-post-info"><a class="article-title" href="/2020/03/28/%E6%8B%96%E6%8B%BD/" title="拖拽">拖拽</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-03-27T16:00:00.000Z" title="发表于 2020-03-28 00:00:00">2020-03-28</time></span><span class="article-meta"><span class="article-meta__separator">|</span><i class="fas fa-inbox"></i><a class="article-meta__categories" href="/categories/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E6%88%98/">项目实战</a></span></div><div class="content">拖拽思路12345671. 我们现在已知的有 鼠标按下的位置 A 鼠标在移动的时候的位置 B 盒子开始的位置 C12. 所以盒子当前的位置 D = B - A + C3. 拖拽触发的条件 鼠标按住盒子才开始拖拽 鼠标抬起拖拽就算结束4. 拖拽开始后 鼠标移动盒子才会跟着移动5. 所以当我们鼠标按下的时候 mousedown 记录 A(鼠标按下的位置) C(盒子开始的位置)6. 鼠标移动的时候 mousemove 获取 B(鼠标随时移动的位置) 动态计算出D 修改盒子样式 让盒子跟着移动7. 鼠标抬起 mouseup 取消拖拽

鼠标按下1231. 当鼠标按下的时候 我们要记录我们按下的位置 还有 盒子的初始位置 2. 记录这个位置的时候 我们 要在移动中 也要使用 也就是说 我们在mousemove的时候 也要使用到这个数据 3. 所以这个时候 我们可以 把这些数据记录在全局上 方便使用 也可以直接挂在到我们的box上 因为 移动事件 也是在我们box上发生的 我们可以通过this 取到
12345678910111213141516//鼠标按下的时候 执行down函数box.addE ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/page/2/#content-inner"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/#content-inner">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/#content-inner">4</a><span class="space">&hellip;</span><a class="page-number" href="/page/7/#content-inner">7</a><a class="extend next" rel="next" href="/page/4/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div><div class="card-widget card-categories"><div class="item-headline">
            <i class="fas fa-folder-open"></i>
            <span>分类</span>
            <a class="card-more-btn" href="/categories/" title="查看更多">
    <i class="fas fa-angle-right"></i></a>
            </div>
            <ul class="card-category-list" id="aside-cat-list">
            <li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Gin-Vue-Admin/"><span class="card-category-list-name">Gin-Vue-Admin</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JS%E9%AB%98%E7%BA%A7/"><span class="card-category-list-name">JS高级</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/JavaScript/"><span class="card-category-list-name">JavaScript</span><span class="card-category-list-count">2</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Node/"><span class="card-category-list-name">Node</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/React/"><span class="card-category-list-name">React</span><span class="card-category-list-count">3</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/TS/"><span class="card-category-list-name">TS</span><span class="card-category-list-count">1</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/Vue/"><span class="card-category-list-name">Vue</span><span class="card-category-list-count">4</span></a></li><li class="card-category-list-item "><a class="card-category-list-link" href="/categories/webpack/"><span class="card-category-list-name">webpack</span><span class="card-category-list-count">3</span></a></li>
            </ul></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/tags/Ant-Design/" style="font-size: 1.1em; color: #999">Ant Design</a> <a href="/tags/Egg/" style="font-size: 1.1em; color: #999">Egg</a> <a href="/tags/JavaScript/" style="font-size: 1.4em; color: #99a5b6">JavaScript</a> <a href="/tags/Json-server/" style="font-size: 1.1em; color: #999">Json-server</a> <a href="/tags/Koa2/" style="font-size: 1.2em; color: #999da3">Koa2</a> <a href="/tags/Mock/" style="font-size: 1.1em; color: #999">Mock</a> <a href="/tags/MongoDB/" style="font-size: 1.2em; color: #999da3">MongoDB</a> <a href="/tags/Node/" style="font-size: 1.1em; color: #999">Node</a> <a href="/tags/Nuxt/" style="font-size: 1.1em; color: #999">Nuxt</a> <a href="/tags/React/" style="font-size: 1.3em; color: #99a1ac">React</a> <a href="/tags/React-%E5%AE%9E%E6%88%98/" style="font-size: 1.1em; color: #999">React 实战</a> <a href="/tags/TypeScript/" style="font-size: 1.2em; color: #999da3">TypeScript</a> <a href="/tags/Vue/" style="font-size: 1.5em; color: #99a9bf">Vue</a> <a href="/tags/Vue-Router/" style="font-size: 1.1em; color: #999">Vue-Router</a> <a href="/tags/Vuex/" style="font-size: 1.1em; color: #999">Vuex</a> <a href="/tags/Webpack/" style="font-size: 1.3em; color: #99a1ac">Webpack</a> <a href="/tags/jQuery/" style="font-size: 1.2em; color: #999da3">jQuery</a> <a href="/tags/web/" style="font-size: 1.2em; color: #999da3">web</a> <a href="/tags/%E5%B0%8F%E7%A8%8B%E5%BA%8F/" style="font-size: 1.1em; color: #999">小程序</a> <a href="/tags/%E5%BE%AE%E4%BF%A1%E5%85%AC%E4%BC%97%E5%8F%B7%E9%85%8D%E7%BD%AE/" style="font-size: 1.1em; color: #999">微信公众号配置</a> <a href="/tags/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93/" style="font-size: 1.2em; color: #999da3">服务端渲染</a> <a href="/tags/%E7%AE%97%E6%B3%95/" style="font-size: 1.1em; color: #999">算法</a> <a href="/tags/%E8%99%9A%E6%8B%9FDom/" style="font-size: 1.1em; color: #999">虚拟Dom</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/04/"><span class="card-archive-list-date">四月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2021/01/"><span class="card-archive-list-date">一月 2021</span><span class="card-archive-list-count">10</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/04/"><span class="card-archive-list-date">四月 2020</span><span class="card-archive-list-count">17</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2020/03/"><span class="card-archive-list-date">三月 2020</span><span class="card-archive-list-count">6</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/archives/2019/03/"><span class="card-archive-list-date">三月 2019</span><span class="card-archive-list-count">31</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">65</div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">274.7k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2021-08-02T09:15:23.879Z"></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    var typed = new Typed("#subtitle", {
      strings: "请大家多多支持淼哥的开源项目 地址在公告中,如果我一拳把自己打死了 那我算强壮还是虚弱,从来没有真正的绝境 只有心灵的迷途,Never put off till tomorrow what you can do today".split(","),
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '请大家多多支持淼哥的开源项目 地址在公告中'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>